<template>
  <div class="tm-app-list">
    <div class="tm-app-list--item" v-for="(item, i) in apps" :key="i" @click="handleClick(item)">
      <i :class="item.icon"></i>
      <div class="tm-app-list--title">{{ item.title }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TmAppList',
  data() {
    return {
      apps: [
        {
          title: '预测数据',
          icon: 'el-icon-s-data',
          dialog: 'TmStorageView'
        },
        {
          title: '预测数据',
          icon: 'el-icon-s-data',
          dialog: 'TmStorageView'
        },
        {
          title: '数据编辑器',
          icon: 'el-icon-s-data',
          dialog: 'TmDataEditor'
        },
        {
          title: '控制台',
          icon: 'el-icon-s-tools',
          dialog: 'TmConsole'
        },
      ]
    }
  },
  methods: {
    handleClick(item) {
      this.$modal.dialog(item.dialog, {
        props: {
          title: item.title,
          width: '90%',
          height: '90%'
        }
      })
    }
  }
}
</script>
